/** * @description: 辅导员工作进度-公共组件 */
<template>
  <div>
    <!-- 循环  :class="[index > 0 ? 'van-hairline--top' : 'content']"-->
    <div @click="skipDetail()" class="content">
      <div class="content-top">
        <div>
          <label>信</label>
          <span>信息工程学院</span>
        </div>
        <!-- 辅导员工作进度才显示 -->
        <p v-show="false">
          <span>286</span>
          <label>人</label>
        </p>
      </div>
      <div class="content-bottom">
        <div v-if="$route.path === '/counsellor'">
          <span>14</span>
          <label>辅导员</label>
        </div>
        <div class="van-hairline--left">
          <span>14<i>%</i></span>
          <label>预警处理率</label>
        </div>
        <div class="van-hairline--left">
          <span>14</span>
          <label>五困生帮扶率</label>
        </div>
        <div class="van-hairline--left">
          <span>14</span>
          <label>学生谈话率</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkRate',
  props: ['workRateList'],
  methods: {
    //下钻
    skipDetail() {
      // 根据页面路径不同进行跳转（未完成）

      //全校，学院，辅导员 三个维度
      if (this.$route.path === '/counsellor') {
        this.$router.push({ path: '/collegeRate', query: { collegeId: '1111111' } })
      } else if (this.$route.path === '/collegeRate') {
        this.$router.push({ path: '/counsellorRate', query: {} })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: 10px;
  &-top {
    @include fcb();
    > div {
      label {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin-right: 12px;
        font-size: $fz12;
        background: #2e6cf6;
        border-radius: 50%;
        color: #fff;
      }
      span {
        font-size: $fz16;
        color: $color-title;
      }
    }
    p {
      span {
        font-size: $fz22;
        color: $color-title;
      }
      label {
        font-size: $fz12;
        color: $color-title;
        margin-right: 10px;
      }
    }
  }

  &-bottom {
    @include fca();
    > div {
      flex: 1;
      text-align: center;
      margin-top: 20px;
      label {
        display: block;
        font-size: $fz12;
        color: #97979f;
        margin-top: 5px;
      }
      span {
        display: block;
        font-size: 20px;
        i {
          font-size: $fz12;
        }
      }
    }
  }
}
.content + .content {
  padding-top: 20px;
}
</style>
